* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html, body, main {
	height: 100%;
}

body{
	font: 14px/1.5 cursive;
}

a {
	text-decoration: none;
	color: #444;
}

ul,li {
	list-style: none;
}
html, body, section {
	height:100%;
	overflow: hidden;
}

.layout {
	margin: 0 auto;
	width: 600px;
}

@media (min-width: 700px) {
	.layout {
		width: 600px;
	}
}
@media (min-width: 900px) {
	.layout {
		width: 800px;
	}
}
@media (min-width: 1000px) {
	.layout{
		width: 900px;
	}
}
@media (min-width: 1200px) {
	.layout {
		width: 1100px;
	}
}

#page-cover {
     display: none;
}

.bg{
	position: absolute;
	z-index: -1;
	left: -10px;
	top: -10px;
	bottom: -10px;
	right: -10px;
	background: url(http://cloud.hunger-valley.com/music/public_tuijian_spring.jpg-middle) center center no-repeat;
	background-size: cover;
    filter: blur(4px);
}

.bg::before{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background: rgba(0,0,0,0.4);
}

main {
	padding-top: 12vh;
	height: calc(100% - 24vh); /* 1vh == 0.125px */
}
main::after{
	content: '';
	display: block;
	clear: both;
}

main .aside{
	float: left;
}

main .aside > figure {
	width: 46vh;
	height: 46vh;
	background-image: url(http://cloud.hunger-valley.com/music/public_tuijian_spring.jpg-middle);
    background-size: cover;
    position-position: center center;
}
main .aside .actions {
	display: flex;
	margin-top: 4vh;
}
main .aside .iconfont {
	flex: 1;
	text-align: center;
	font-size: 5vh;
	color: rgba(255,2555,255,0.4);
	transition: color .4s;
	cursor: pointer; /*手型鼠标*/
}
main .aside .iconfont:hover {
	color: #fff;
}
main .aside .iconfont.active {
    color: #ff5722;
}

main .detail {
	margin-left: 56vh;
	color: #fff;
}
main .detail .tag {
	font-size: 1vh;
	padding: .4em .8em;
	background: #6dbffa;
}
main .detail h1 {
	font-size: 3vh;
	margin: 4vh -1vh 4vh;
}
main .detail ul{
	display: flex;
	font-size: 3vh;
	margin: 9vh -4vh 4vh -4vh;
}
main .detail .icons{
	margin-left: 1vh;
	padding: 2vh;
	float: left;
}
main .icons .iconfont {
	font-size: 3vh;
	margin-right: 1vh;
}
main .area-bar {
	margin-top: 13vh;
	display: flex;
	align-items: center;
}
main .area-bar .bar {
	position: relative;
	flex: 1;
	height: .8vh;
	border-radius: .2vh;
	background: rgba(157, 133, 133, 0.4)
}
main .area-bar .current-time {
	width: 3vh;
	font-size: 2vh;
	margin-left: 1vh;
}

main .area-bar .bar-progress {
	position: absolute;
	height: .8vh;
	width: 0%;
	transition: width .8s;
	background-color: #d5d4d4;
	border-radius: .2vh;
}

main .author {
	font-size: 2vh;
	margin-top: 1vh;
	color: rgba(255,255,255,0.6);
}
main .lyric {
	font-size: 3vh;
	margin-top: 3vh;
	color: rgba(255,255,255,1);
}

/* 音乐列表 */
footer {
	height: 24vh;
	color: #fff;
	background: rgba(255,255,255,0.2);
	box-shadow: 0px -.25vh .25vh .25vh rgba(255,255,255,0.2);
}

footer > .layout {
	position: relative;
}
footer .box{
	position: relative;
    overflow: hidden;
	height: 24vh;
}
footer ul {
	position: absolute;
	left: 0;
}
footer ul:after {
	content: '';
	display: block;
	clear: both;
}
footer li {
	float: left;
	margin-top: 1vh;
	margin: 2vh 2vh 0 2vh;
	width: 20vh;
	height: 20vh;

	text-align: center;
	cursor: pointer;
}

footer li:hover {
	box-shadow: 0 0 .5vh .5vh rgba(255,255,255,0.8);
}

footer li .cover {
	height: 16vh;
	background-size: cover;
	background-position: center center;
}

footer h3 {
	font-size: 2vh;
	color: rgba(255,255,255,0.6);
}
foot li.active {
	box-shadow: 0 0 .5vh .5vh rgba(255,255,255,0.8);
}

footer .iconfont {
    position: absolute;
    top: 4vh;
    font-size: 6vh;
    color: rgba(255,255,255,0.4);
    opacity: 0;
    transition: all .4s; /* 左右箭渐变 */
    cursor: pointer;
}
footer:hover .iconfont {
	opacity: 1;
}
footer .iconfont:hover {
	color: rgba(255,255,255,0.8);
}
footer .icon-left {
	left: -8vh;
}
footer .icon-right {
	right: -8vh;
}



